<template>
  <div id="app">
   <router-view></router-view>
   
        <ul
          class="infinite-list"
          v-infinite-scroll="load"
          style="overflow: auto"
        >
          <li v-for="i in count" :key="i" class="infinite-list-item">
            {{ i }}
          </li>
        </ul>
  </div>
</template>

<script>
export default {
  name: "mainBox",
  components: {},
  data() {
    return {
      count: 30,
    };
  },
  methods: {
    load() {
      this.count += 2;
    },
  },
};
</script>

<style lang="scss" scoped>
/* 无限滚动列表样式 */
.infinite-list {
  padding: 0;
  margin: 0;
  list-style: none;
}

.infinite-list-item {
  padding: 10px;
  border-bottom: 1px solid #eee;
}
</style>
